<script src="./page.js"></script>
<style lang="less" rel="stylesheet/less">
    @import "./page.less";
</style>

<template>
<div class="tt-warp">
	<el-form>
        <el-row :gutter="40">
            <el-col :span="8">
                <el-form-item label="出发站" style="color:#fff;">
                    <el-select v-model="stationId" placeholder="请选择站点" @change="circleRun">
                        <el-option v-for="item in stationList" :key="item.code" :label="item.name" :value="item.code"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8"><p class="tt-title">车次时刻表</p></el-col>
            <el-col :span="8" style="text-align:right;">
                <el-button type="text" @click="toggleFullScreen">{{btnText}}</el-button>
            </el-col>
        </el-row> 
    </el-form>
    <!-- <el-row :gutter="40">
        
    </el-row> -->
    <el-row :gutter="40">
        <p class="tt-subtitle">以下车次信息仅供参考，建议至少提前15分钟至各个检票口检票上车，若车次发车时间、检票口等信息发生变动，请以车站信息为准</p>
    </el-row>
    <section class="content">
        <el-table border size="large" :data="tableData" :row-style="rowStyle" :header-row-style="headStyle" empty-text=" ">
            <el-table-column label="车次" prop="trainNo"></el-table-column>
            <el-table-column label="终点站" prop="destinationStation"></el-table-column>
            <el-table-column label="发车时间">
                <template slot-scope="scope">
                    <p>{{scope.row.trainStartTime ? scope.row.trainStartTime.split(' ')[1].substr(0,5) : ''}}</p>
                </template>
            </el-table-column>
            <el-table-column label="检票口" prop="ticketBarrier"></el-table-column>
            <el-table-column label="发车倒计时">
                <template slot-scope="scope">
                    <p>{{scope.row.countdown.timeStr}}</p>
                </template>
            </el-table-column>
        </el-table>
    </section>
</div>
</template>